<template>
  <view class="address-container">
    <!-- 头部标题和新建按钮 -->
    <view class="address-header">
      <view class="header-title">收货地址</view>
      <view class="new-address" @click="navigateToNewAddress">新建</view>
    </view>

    <!-- 地址列表 -->
    <view class="address-list">
      <view
        v-for="(address, index) in addressList"
        :key="index"
        class="address-item"
        :class="{ selected: address === selectedAddress }"
        @click="selectAddress(address)"
      >
        <view class="address-info">
          <view>
            <view class="user-info">
              <text class="user-name">{{ address.name }}</text>
              <text class="user-phone">{{ address.phone }}</text>
            </view>
            <view class="address-detail">{{ address.city + address.department + address.houseNumber }}</view>
          </view>
          <view class="address-actions">
            <text class="edit-btn" @click.stop="editAddress(address)">
              <img src="/static/imgs/edit.png" alt="" height="15px">
            </text>
            <text class="delete-btn" @click.stop="deleteAddress(address.id)">删除</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 无地址提示 -->
    <view v-if="addressList.length === 0" class="empty-address">
      <text>暂无收货地址，请添加</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [],
      selectedAddress: null
    };
  },
  onShow() {
    this.fetch();
    const storedAddress = uni.getStorageSync('selectedAddress');
    if (storedAddress) {
      try {
        this.selectedAddress = JSON.parse(storedAddress);
      } catch (error) {
        console.error('解析选中地址失败', error);
      }
    }
  },
  methods: {
    fetch() {
      uni.request({
        url: `http://localhost:3000/address`,
        success: (res) => {
          this.addressList = res.data;
        }
      });
    },
    // 跳转到新建地址页面
    navigateToNewAddress() {
      uni.navigateTo({
        url: '/pages/own/newaddress'
      });
    },
    // 选择地址
    selectAddress(address) {
      uni.setStorageSync('selectedAddress', JSON.stringify(address));
      this.selectedAddress = address;
      uni.navigateBack();
    },
    // 编辑地址
    editAddress(address) {
      uni.navigateTo({
        url: `/pages/own/editaddress?id=${address.id}`
      });
    },
    // 删除地址
    deleteAddress(id) {
      uni.showModal({
        title: '提示',
        content: '确定要删除该收货地址吗？',
        success: (res) => {
          if (res.confirm) {
            // 删除功能
            uni.request({
              url: `http://localhost:3000/address/${id}`,
              method: 'DELETE',
              success: (res) => {
                uni.hideLoading();
                if (res.statusCode === 200) {
                  this.addressList = this.addressList.filter(item => item.id!== id);
                  // 如果删除的是当前选中的地址，将选中地址设为null
                  if (this.selectedAddress && this.selectedAddress.id === id) {
                    this.selectedAddress = null;
                    uni.removeStorageSync('selectedAddress');
                  }
                  uni.showToast({
                    title: '删除成功',
                    icon:'success'
                  });
                } else {
                  uni.showToast({
                    title: '删除失败',
                    icon: 'none'
                  });
                }
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style>
.address-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.address-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.address-info {
  display: flex;
  justify-content: space-between;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.new-address {
  color: black;
  font-size: 20px;
}

.address-list {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.address-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.address-item:last-child {
  border-bottom: none;
}

.address-item:active {
  background-color: #0ef16d; /* 选中地址的背景色，可根据需求调整 */
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.user-name {
  font-size: 16px;
  font-weight: bold;
  margin-right: 15px;
}

.user-phone {
  color: #666;
  font-size: 14px;
}

.address-detail {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.address-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  align-items: center;
}

.edit-btn,
.delete-btn {
  padding: 5px 10px;
  font-size: 13px;
  margin-left: 15px;
}

.edit-btn {
  color: #1aad19;
  border: 1px solid #1aad19;
  border-radius: 3px;
}

.delete-btn {
  color: #f5222d;
  border: 1px solid #f5222d;
  border-radius: 3px;
}

.empty-address {
  text-align: center;
  padding: 50px 0;
  color: #999;
}
</style>